<template>
  <div class="mvitem" @click="goMv">
    <div class="img-wrap">
      <img v-lazy="img" alt />
      <span class="iconfont icon-play"></span>
      <div class="num-wrap">
        <div class="iconfont icon-play"></div>
        <div class="num">{{playCount}}</div>
      </div>
    </div>
    <div class="info-wrap">
      <div class="name">{{name}}</div>
      <div class="singer">{{author}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MvCard',
  props: ['id', 'img', 'duration', 'playCount', 'name', 'author'],
  methods: {
    goMv () {
      this.$router.push(`/mv/${this.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.mvitem {
  width: 250px;
  cursor: pointer;
  margin-right: 10px;
  &::after {
    margin-right: 0;
  }

  .img-wrap {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      border-radius: 5px;
    }
    .num-wrap {
      position: absolute;
      color: white;
      top: 0;
      right: 0;
      display: flex;
      align-content: center;
      font-size: 15px;
      padding-right: 5px;
      padding-top: 2px;
      .icon-play {
        font-size: 12px;
        display: flex;
        align-items: center;
        margin-right: 5px;
      }
    }
    > .icon-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      color: #dd6d60;
      font-size: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.8);
      opacity: 0;
    }
    &:hover > .icon-play {
      opacity: 1;
    }
  }

  .info-wrap {
    .name {
      font-size: 15px;
      margin-bottom: 5px;
    }
    .singer {
      font-size: 14px;
      color: #c5c5c5;
    }
  }
}
</style>
